<template>
  <!-- 人流车流数据 -->
  <div class="current-flow chart-box1">
    <div class="chart-title">
      <a-space size="large">
        <span
          v-for="item of tabList"
          :key="item.key"
          class="item"
          :class="{ active: item.key == activeTab }"
          @click="tabChange(item.key)"
        >
          {{ item.title }}
        </span>
      </a-space>
    </div>
    <div class="chart-content">
      <a-row class="h-100p" :gutter="12" align="middle">
        <a-col :span="8">
          <div class="text-number-1">
            <div>实时保有量</div>
            <count-to
              class="number"
              style="color: #38b05c"
              :start-val="showData.now_count.oldVal"
              :end-val="showData.now_count.newVal"
              :duration="3000"
            />
          </div>
        </a-col>
        <a-col :span="8">
          <div class="text-number-1">
            <div>{{ activeTab == "car" ? "车" : "人" }}流峰值</div>
            <count-to
              class="number"
              style="color: #dc6a1f"
              :start-val="showData.max_count.oldVal"
              :end-val="showData.max_count.newVal"
              :duration="3000"
            />
          </div>
        </a-col>
        <a-col class="h-100p" :span="8">
          <div ref="currentFlowChart" class="h-100p flex align-center">
            <Decoration9 :style="chartStyle">
              <div class="text-center">
                <div class="number" style="font-size: 2.4rem">
                  <count-to
                    :start-val="showData.peak_scale.oldVal"
                    :end-val="showData.peak_scale.newVal"
                    :duration="3000"
                  />
                  %
                </div>
                <div style="margin-top: -4px">峰值占比</div>
              </div>
            </Decoration9>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  nextTick,
  toRaw,
  computed,
  watch,
} from "vue";
import { Decoration9 } from "@kjgl77/datav-vue3";
import CountTo from "../countTo/index.vue";
import store from "../../../../store";
import common from "../../utils/common";

export default defineComponent({
  name: "CurrentFlow",
  components: { Decoration9, CountTo },
  setup(props) {
    const state = reactive({
      tabList: [
        { key: "people", title: "人流数据" },
        { key: "car", title: "车流数据" },
      ],
      activeTab: "people",
      currentFlowChart: null,
      chartSize: 100,
      data: {
        car: {
          max_count: { ...common.countToInit },
          now_count: { ...common.countToInit },
          peak_scale: { ...common.countToInit },
        },
        people: {
          max_count: { ...common.countToInit },
          now_count: { ...common.countToInit },
          peak_scale: { ...common.countToInit },
        },
      },
      showData: {
        max_count: { ...common.countToInit },
        now_count: { ...common.countToInit },
        peak_scale: { ...common.countToInit },
      },
    });

    const tabChange = (key) => {
      state.showData = {
        max_count: {
          oldVal: state.data[state.activeTab].max_count.newVal,
          newVal: state.data[key].max_count.newVal,
        },
        now_count: {
          oldVal: state.data[state.activeTab].now_count.newVal,
          newVal: state.data[key].now_count.newVal,
        },
        peak_scale: {
          oldVal: state.data[state.activeTab].peak_scale.newVal,
          newVal: state.data[key].peak_scale.newVal,
        },
      };
      state.activeTab = key;
    };
    const chartStyle = computed(
      () => `width:${state.chartSize}px;height:${state.chartSize}px;`
    );
    const getChartSize = () => {
      nextTick(() => {
        state.chartSize = state.currentFlowChart.offsetHeight;
        console.log("-------state.chartSize", state.chartSize);
      });
    };
    watch(
      () => store.getters.resizeTrigger,
      () => {
        getChartSize();
      }
    );
    const initChart = () => {
      getChartSize();
    };

    watch(
      [
        () => store.getters.flow.CarStream,
        () => store.getters.flow.PeopleStream,
      ],
      ([val1, val2]) => {
        if (val1 || val2) {
          getData();
        }
      }
    );

    const getData = () => {
      const { CarStream, PeopleStream } = store.getters.flow;
      if (CarStream) {
        for (let key in CarStream) {
          let newItem = {
            oldVal: state.data.car[key].newVal,
            newVal: CarStream[key],
          };
          state.data.car[key] = { ...newItem };
        }
      }
      if (PeopleStream) {
        for (let key in PeopleStream) {
          let newItem = {
            oldVal: state.data.people[key].newVal,
            newVal: PeopleStream[key],
          };
          state.data.people[key] = { ...newItem };
        }
      }
      state.showData = state.data.people;
      console.log(
        "-----------------------flow-CarStream-PeopleStream",
        toRaw(state.data)
      );
    };

    const init = () => {
      initChart();
      getData();
    };

    init();

    return {
      chartStyle,
      ...toRefs(state),
      tabChange,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.current-flow {
  .chart-content {
    padding: 10px 20px;
    .text-number-1 {
      .number {
        font-size: 3rem;
      }
    }
  }
}
</style>
